import React, { Component, PropTypes } from 'react'

class Reg extends Component {

  render() {

    console.log('reg:',this.props);

    const { postRegForm,handleChange,reg } = this.props

    return (
       <div id='reg'>
            <div className='title'> Login </div>
            <div className='form'>
                 <div className="reg_item username">
                      <input autoCapitalize="off" autoCorrect="off" autoComplete="off" ref='userName' name="userName" type="text" placeholder="Email or Username"  onChange={handleChange.bind(this,'username')}  value={reg.username} />
                 </div>
                 <div className='reg_item_error'> {reg.usernameError} </div>
                 <div className="reg_item password">
                      <input autoCapitalize="off" autoCorrect="off" autoComplete="off" ref='passWord' name="passWord" type="password" placeholder="Password" onChange={handleChange.bind(this,'password')} value={reg.password} />
                 </div>
                 <div className='reg_item_error'>{reg.passwordError}</div>
                 <div className="reg_button">
                      <button type="button" className="btn"  onClick={postRegForm.bind(this)} > Done </button>
                 </div>
            </div> 
       </div>
    )
  }
}

Reg.propTypes = {
    postRegForm: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
}

export default Reg
